<template>
    <div class="brand">
       <div class="brand-head">
        <div class="search">
            <el-form class="search-form" >
                <el-form-item label="品牌" label-width="76px"  class="label-name-col">
                    <el-input v-model="form.brand" placeholder="请输入品牌"></el-input>
                </el-form-item>
                <el-form-item label="创建人" label-width="76px" class="label-tired-col">
                    <el-input v-model="form.createUser" placeholder="请输入创建人"></el-input>
                </el-form-item>
                <el-form-item label="审核状态"  label-width="76px">
                    <el-select v-model="form.auditStatus" placeholder="请选择审核状态" style="width:100%">
                        <el-option
                            v-for="item in examineOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="优势状态"  label-width="76px">
                    <el-select v-model="form.advantageStatus" placeholder="请选择优势状态" style="width:100%">
                        <el-option
                            v-for="item in advantageOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-btn">
            <el-button type="primary" class="btn" @click="doRefresh()">查 询</el-button>
            <el-button  @click="doReset()" class="resletBtn btn">重 置</el-button>
        </div>
       </div>
       <div class="operation-box">
            <el-button type="primary" @click="getAdd">新增</el-button>
            <el-button type="primary" @click="getConcel" :disabled="isbtndisabled">取消</el-button>
            <el-button type="primary" @click="getDelay" :disabled="isDelaydisabled ">申请延期</el-button>
            <el-button type="primary" @click="getApply"  :disabled="issedApplydisabled">再次申请</el-button>
            <el-button type="primary" @click="getDel" :disabled="isdelbtndisabled">删除</el-button>
       </div>
       <div class="table-box">
        <!-- 表格 -->
            <myTable ref="mytable"
                :config="tableconfig"
                @handleSelectChange="handleSelectChange"
                @checkedAll="checkedAllVal"
                :checkedStatus="allParams.isAll"
                >
                <div slot="mytablebody">
                </div>
                <!-- 优势类型 -->
                <template v-slot:dominantNature="{ data }">
                    <p class="type-box" v-if="data.dominantNature == 1">代理</p>
                    <p  class="type-box" v-if="data.dominantNature == 2">原厂</p>
                    <p  class="type-box" v-if="data.dominantNature == 3">分销</p>
                </template>
                <!-- 审核状态 -->
                <template v-slot:auditStatus="{ data }">
                    <el-link  v-if="data.auditStatus==0" :underline="false"><span class="success-icon wait-icon"></span><span>审核中</span>  </el-link>
                    <el-link v-if="data.auditStatus==1" :underline="false"> <span class="success-icon"></span><span>审核通过</span></el-link>
                    <div  v-if="data.auditStatus==2">
                        <el-tooltip  class="item" effect="dark"  placement="top"  :disabled="data.auditReason == null">
                            <div slot="content">{{ data.auditReason }}</div>
                            <el-link  :underline="false"><span class="success-icon reduse-icon"></span><span>审核拒绝</span> </el-link>
                        </el-tooltip>
                    </div>
                </template>
                <!-- 优势状态 -->
                <template v-slot:advantageStatus="{ data }">
                    <p v-if="data.advantageStatus == 0" class="status-box"><span class="success-icon empty-icon"></span><span>无效</span></p>
                    <p v-if="data.advantageStatus == 1" class="status-box"> <span class="success-icon nalm-icon"></span><span>正常</span></p>
                </template>
                <!-- 有效期开始 -->
                <template v-slot:certificateValidityStart="{ data }">
                    <p  class="type-box" v-if="data.certificateValidityStart">{{data.certificateValidityStart}}</p>
                    <p  class="type-box" v-else>-</p>
                </template>
                 <!-- 有效期截止 -->
                 <template v-slot:certificateValidityEnd="{ data }">
                    <p  class="type-box" v-if="data.certificateValidityEnd">{{data.certificateValidityEnd}}</p>
                    <p  class="type-box" v-else>-</p>
                </template>
                <!-- 证明文件 -->
                <template v-slot:files="{ data }">
                    <el-link type="primary" :underline="false" v-if="data.dominantNature == 1" class="look" @click="getLook(data.files)">查看 </el-link>
                    <el-link type="primary" :underline="false" v-if="data.dominantNature == 1 &&data.auditStatus==0" @click="getUpload(data)">上传 </el-link>
                    <el-link type="primary" :underline="false" v-if="data.dominantNature != 1" class="look" >-</el-link>
                </template>
            </myTable> 
             <!--查看  -->
             <el-dialog title="证明文件查看" :visible.sync="dialogLookVisible" width="40%" class="add-dialog">
                <div class="look-box">
                    <ul class="file-list">
                        <li v-for="(item,index) in fileList" :key="item.id">
                            <p class="file-name">{{item.fileName}}</p>
                            <p :class="isFileShow[index]?'file-look look-color':'file-look'" @click="getPic(item.fullPath,index)">查看</p>
                        </li>
                    </ul>
                    <iframe class="file-pdf" v-if="filesName == 'pdf' || filesName == 'PDF'" :src="fileUrl">
                    
                    </iframe>
                    <img :src="fileUrl" alt="" class="file-pic" v-else/>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogLookVisible = false">返回</el-button>
                </div>
            </el-dialog>
            <el-dialog title="上传证明文件" :visible.sync="dialogUploadVisible" width="35%" class="add-dialog" @close="closeUpload">
                <div class="upload-title">证明文件上传</div>
                <el-upload class="uploadfile-demo" 
                    ref="uploadSupFile" 
                    list-type="picture-card"
                    :action="upload_file_url"
                    :headers="upHeaders"
                    multiple 
                    :before-upload="beforeUploadAvatarUpload"
                    :on-remove="handleUploadRemove"
                    :on-success="handleUploadSuccess"
                   >
                    <i class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">仅支持jpg、png、gif、pdf格式</div>
                </el-upload>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="getUploadSubmit()">确认</el-button>
                    <el-button @click="dialogUploadVisible = false" class="resletBtn">取消</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 新增 -->
        <el-dialog title="优势品牌新增" :visible.sync="dialogAddVisible" width="36.5%" @close="closeAdd" class="add-dialog">
            <el-form :model="add_form" class="addform" :rules="rules" ref="add_form">
                <el-form-item label="优势类型：" :label-width="formLabelWidth" prop="dominantNature">
                    <el-select v-model="add_form.dominantNature" placeholder="请选择优势类型" style="width:100%">
                        <el-option label="代理" value="1"></el-option>
                        <el-option label="原厂" value="2"></el-option>
                        <el-option label="分销" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="品牌：" :label-width="formLabelWidth" prop="brand">
                    <el-select ref="searchSelect" v-model="add_form.brand" placeholder="请选择品牌" style="width:100%" filterable  v-el-select-loadmore="loadmore" @input.native="fiterData">
                        <el-option :label="item.brand" :value="item.brand" v-for="item in brandList" :key="item.id"></el-option>
                    </el-select>
                    <div class="el-form-item__error " v-show="isFalse">优势品牌已存在</div>
                </el-form-item>
                <el-form-item label="上传证明文件：" :label-width="formLabelWidth" prop="relationPictureIds" v-if="add_form.dominantNature==1">
                    <el-upload class="upload-demo" 
                        ref="adduploadFile" 
                        :action="upload_file_url"
                        :headers="upHeaders"
                        multiple 
                        :before-upload="beforeReplyAvatarUpload"
                        :on-remove="handleReplyRemove"
                        :on-success="handleReplySuccess"
                        :on-exceed="handleReplyExceed">
                        <el-link :underline="false" size="medium" type="primary" >点击上传</el-link>
                        <div slot="tip" class="el-upload__tip">仅支持jpg、png、gif、pdf格式</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="有效期：" :label-width="formLabelWidth" required v-if="add_form.dominantNature==1 || add_form.dominantNature==3" class="date-box">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item prop="certificateValidityStart">
                                <el-date-picker
                                v-model="add_form.certificateValidityStart"
                                type="date"
                                placeholder="选择开始日期"
                                :picker-options="setStartDisabled"
                                value-format="yyyy-MM-dd"
                                popper-class="startClass"
                                @focus="focusStart"
                                >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <span class="line">—</span>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="certificateValidityEnd">
                            <el-date-picker
                            v-model="add_form.certificateValidityEnd"
                            type="date"
                            :picker-options="setFinshisabled"
                            value-format="yyyy-MM-dd"
                            placeholder="选择结束日期"
                            popper-class="endClass"
                            @focus="focusEnd"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    </el-row>
                  
                </el-form-item>
                <el-form-item label="备注：" :label-width="formLabelWidth" prop="remark">
                    <el-input type="textarea" v-model="add_form.remark"   maxlength="100"  show-word-limit></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getaddSubmit('add_form')" v-preventReClick size="small">确认</el-button>
                <el-button @click="dialogAddVisible = false" size="small"  class = "resletBtn">取消</el-button>
            </div>
        </el-dialog>
        <!-- 取消 -->
        <el-dialog title="取消" :visible.sync="dialogCancelVisible" width="20%" class="cancel-dialog">
            <div class="del-box">
              <img src="@/assets/images/concel.png" alt="" class="concel-icon"/>
                <p class="del-content">您确认取消该优势品牌吗？</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getaCancelSubmit()">确认</el-button>
                <el-button @click="dialogCancelVisible = false" class="resletBtn">取消</el-button>
            </div>
        </el-dialog>
        <!-- 申请延期 -->
        <el-dialog title="申请延期" :visible.sync="dialogDelayVisible" width="36%" @close="closeDelay" class="add-dialog">
            <el-form :model="delayform" class="addform" :rules="delayrules" ref="delayform">
                <el-form-item label="设置延期：" :label-width="formLabelWidth" prop="certificateValidityEnd">
                    <formDate :date="delayform.certificateValidityEnd" @getData="getDate"></formDate>
                </el-form-item>
                <el-form-item label="证明文件上传：" :label-width="formLabelWidth" prop="relationPictureIds" v-if="dominantNature == 1">
                    <el-upload class="upload-demo" 
                        ref="uploadFile" 
                        :action="upload_file_url"
                        :headers="upHeaders"
                        multiple 
                        :before-upload="beforeDelayAvatarUpload"
                        :on-remove="handleDelayRemove"
                        :on-success="handleDelaySuccess"
                        :on-exceed="handleDelayExceed">
                        <el-link :underline="false" size="medium" type="primary" >点击上传</el-link>
                        <div slot="tip" class="el-upload__tip">仅支持jpg、png、gif、pdf格式</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="情况说明：" :label-width="formLabelWidth" prop="description">
                    <el-input type="textarea" v-model="delayform.description"  maxlength="100"  show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getdelaySubmit('delayform')">确认申请</el-button>
                <el-button @click="dialogDelayVisible = false" class="resletBtn">取消</el-button>
               
            </div>
        </el-dialog>
        <!-- 再次申请 -->
        <el-dialog title="再次申请" :visible.sync="dialogApplyVisible" width="36%" class="apply-dialog" @close="closeApply">
            <div class="addform">
                <el-form :model="applyform"  :rules="applyRules" ref="applyform">
                    <el-form-item label="有效期：" :label-width="formLabelWidth" required class="applydate-box" v-if="dominantNature != 2">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item prop="startDate">
                                    <el-date-picker
                                    v-model="applyform.startDate"
                                    type="date"
                                    placeholder="选择开始日期"
                                    :picker-options="setStartDateDisabled"
                                    value-format="yyyy-MM-dd"
                                
                                    @focus="focusStart"
                                    >
                                </el-date-picker>
                            </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <span class="line">—</span>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="endDate">
                                    <el-date-picker
                                    v-model="applyform.endDate"
                                    type="date"
                                    :picker-options="setFinshDateisabled"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择结束日期"
                                    @focus="focusEnd"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="证明文件上传：" :label-width="formLabelWidth" prop="relationPictureIds" v-if="dominantNature == 1">
                        <el-upload class="upload-demo" 
                            ref="uploadFile" 
                            :action="upload_file_url"
                            :headers="upHeaders"
                            multiple 
                            :before-upload="beforeApplyAvatarUpload"
                            :on-remove="handleApplyRemove"
                            :on-success="handleApplySuccess"
                            :on-exceed="handleApplyExceed">
                            <el-link :underline="false" size="medium" type="primary" >点击上传</el-link>
                            <div slot="tip" class="el-upload__tip">仅支持jpg、png、gif、pdf格式</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth" prop="remark">
                        <el-input
                            type="textarea"
                            v-model="applyform.remark"
                            maxlength="100"
                            show-word-limit
                            >
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getApplySubmit('applyform')">确认申请</el-button>
                <el-button @click="dialogApplyVisible = false" class="resletBtn">取消</el-button>
            </div>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog title="删除" :visible.sync="dialogDelVisible" width="20%" class="cancel-dialog">
            <div class="del-box">
                <i class="el-icon-delete del-icon"></i>
                <p class="del-content">您确认删除该优势品牌吗？</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getDelSubmit()">确认</el-button>
                <el-button @click="dialogDelVisible = false" class="resletBtn">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import formDate from '@/components/formDate/index.vue';
    import { brandList,addAdvantageBrand,cancelAdvantageBrand,reApply,deleteAdvantageBrand,application,brandByPage,checkAdvantageBrand,confirmPicture } from "@/api/stock";
    import { getToken } from '@/utils/auth'
    export default {
        name:'advantageBrand',
        components:{
            formDate,
        },
        data(){
            return{
                form:{
                    brand:'',
                    createUser:'',
                    enterpriseId:"",
                    auditStatus:'',
                    advantageStatus:'',
                    pageNo:1,
                    pageSize:20,
                },
                examineOption:[
                    {
                        value: '0',
                        label: '审核中'
                    },
                    {
                        value: '1',
                        label: '审核通过'
                    },
                    {
                        value: '2',
                        label: '审核拒绝'
                    }

                ],
                advantageOption:[
                    {
                        value:"1",
                        label:'正常'
                    },
                    {
                        value:"0",
                        label:'无效'
                    }
                ],
                tableconfig: {
                    loading: false,
                    isselection: true,
                    ispagination: true,
                    tabledata: [
                       
                    ],
                    isindex: true,
                    thead: [
                    { sort: null, label: '品牌', prop: 'brand',
                     width: 250 
                    },
                    { sort: null, label: '创建人', prop: 'createUser',
                     width: 280 
                    },
                    { sort: null, label: '优势类型', prop: 'dominantNature',
                    //  width: 150 ,
                     type: 'slot'},
                    { sort: null, label: '审核状态', prop: 'auditStatus',
                    //  width: 150,
                     type: 'slot'},
                    { sort: null, label: '优势状态', prop: 'advantageStatus',
                    //  width: 150 ,
                     type: 'slot'},
                    { sort: null, label: '有效期开始', prop: 'certificateValidityStart', 
                    // width: 150,
                    type: 'slot' },
                    { sort: null, label: '有效期截止', prop: 'certificateValidityEnd', 
                    // width: 150,
                    type: 'slot'},
                    { sort: null, label: '证明文件', prop: 'files', 
                    // width: 150,
                    type: 'slot'},
                    { sort: null, label: '备注', prop: 'remark' },     
                    ],
                    checkedAll: false, //全选所有
                    checkedPage: false, //全选本页
                    currentpage: 1,
                    pagesize: 20,
                    total: 0,
                },
                // 当前选中的行数据
                selectrow: [],
                isbtndisabled:true,
                isdelbtndisabled:true,
                isDelaydisabled :true,
                issedApplydisabled:true,
                dialogAddVisible:false, //新增弹框
                dialogDelVisible:false,//删除弹框
                dialogCancelVisible:false,//取消弹框
                dialogDelayVisible:false,//申请延期
                dialogApplyVisible:false,//再次申请
                dialogLookVisible:false,//查看
                dialogUploadVisible:false,
                formLabelWidth: '113px',
                add_form:{
                    dominantNature:"1",
                    brand:'',
                    relationPictureIds:[],
                    certificateValidity:[],
                    certificateValidityStart:"",
                    certificateValidityEnd:'',
                    remark:'',
                    id:'',
                },
                rules: {
                    brand: [
                        { required: true, message: '请选择品牌', trigger: 'change' },
                    ],
                    relationPictureIds:[
                    { required: true, message: '请上传证明文件', trigger: 'change' },
                    ],
                    certificateValidityStart:[
                        { required: true, message: '请选择开始日期', trigger: 'blur' },
                    ],
                    certificateValidityEnd:[
                        { required: true, message: '请选择结束日期', trigger: 'blur' },
                    ],
                },
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                        {
                            text: '最近一年',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                    ],
                },
                setStartDisabled: {
                    disabledDate: (time) => {
                        if (this.add_form.certificateValidityEnd) {
                            return  Date.now() < time.getTime() >= new Date(this.add_form.certificateValidityEnd).getTime();
                        }else{
                            return  time.getTime() < Date.now() - 86400000;
                        }
                    },
                },
                setStartDateDisabled:{
                    disabledDate: (time) => {
                        if (this.applyform.endDate) {
                            return  Date.now() < time.getTime() >= new Date(this.applyform.endDate).getTime();
                        }else{
                            return  time.getTime() < Date.now() - 86400000;
                        }
                    },
                },
                setFinshisabled: {
                    disabledDate: (time) => {
                        if(this.add_form.certificateValidityStart){
                            return time.getTime() < new Date(this.add_form.certificateValidityStart).getTime();
                        }else{
                            return time.getTime()
                        }
                    }
                },
                setFinshDateisabled:{
                    disabledDate: (time) => {
                        if(this.applyform.startDate){
                            return time.getTime() < new Date(this.applyform.startDate).getTime();
                        }else{
                            return time.getTime()
                        }
                    }
                },
                upload_file_url:process.env.VUE_APP_BASE_URL + '/api/v1/uploadFile/pictureUpload',
                upHeaders:{
                    'Authorization':"6a77998089b8467d83d2094a8011b02d",
                    'Token':'Bearer '+ getToken()
                },
                delayform:{
                    relationPictureIds:[],
                    certificateValidityEnd:'',
                    description:'',
                    id:'',
                },
                dominantNature:"",
                applyform:{
                    endDate:'',
                    startDate:'',
                    createDate:[],
                    relationPictureIds:[],
                    remark:'',
                    id:'',
                },
                delayrules:{
                    certificateValidityEnd:[
                        { required: true, message: '请选择日期', trigger: 'blur' },
                    ],
                    relationPictureIds:[
                        { required: true, message: '请上传证明文件', trigger: 'blur' },
                    ]
                },
                applyRules:{
                    startDate:[
                        { required: true, message: '请选择开始有效期', trigger: 'change' },
                    ],
                    endDate:[
                        { required: true, message: '请选择结束有效期', trigger: 'change' },
                    ],
                    relationPictureIds:[
                        { required: true, message: '请上传证明文件', trigger: 'blur' },
                    ]
                },
                brandId:[],
                allParams:{
                    advantageStatus: '',
                    auditStatus: '',
                    brand: "",
                    createUser: "",
                    ids: [],
                    isAll: false,
                },
                applyParams:{
                    advantageStatus: '',
                    auditStatus: '',
                    brand: "",
                    createUser: "",
                    ids: [],
                    relationPictureIds:[],
                    isAll: false,
                    startDate:'',
                    endDate:"",
                    remark:'',
                },
                fileList:[],
                isFileShow:[],
                fileUrl:'',
                filesName:'',
                brandList:[],
                pageData:{
                    pageNo:1,
                    pageSize:20,
                    searchName:"",
                },
                supportFile:{
                    id:'',
                    pctureIds:[],
                },
                isFalse:false,
            }
        },
        methods:{
            loadmore () {
                this.pageData.pageNo++
                this.getBrandList(this.pageData)
            },
            getDate(date){
                this.delayform.certificateValidityEnd = date;
            },
            handleSelectChange(section) {
                this.selectrow = section;
                console.log(this.selectrow,'333333');
                if(this.selectrow.length >= 1){
                    let arrStatus = [];
                    this.selectrow.map(item=>{
                        if(item.advantageStatus == 0){
                            arrStatus.push(item);
                        }
                        if(arrStatus.length >0){
                            this.isbtndisabled = true;
                        }else{
                            this.isbtndisabled = false;
                        }
                    })
                }else{
                    this.isbtndisabled = true;
                }
                if(this.selectrow.length >= 1){
                    this.isdelbtndisabled = false;
                }else{
                    this.isdelbtndisabled = true;
                }
                // 申请延期
                if(this.selectrow.length == 1){
                    if(this.selectrow[0].advantageStatus == 1 && this.selectrow[0].dominantNature != 2){
                        this.isDelaydisabled = false;
                    }else{
                        this.isDelaydisabled = true;
                    }
                }else{
                    this.isDelaydisabled = true;
                } 
                // 再次申请
                if(this.selectrow.length == 1){
                    if( this.selectrow[0].advantageStatus == 0 && this.selectrow[0].auditStatus == 1 || this.selectrow[0].advantageStatus == 0 &&this.selectrow[0].auditStatus == 2  ){
                        this.issedApplydisabled = false;
                    }else{
                        this.issedApplydisabled = true;
                    }
                }else{
                    this.issedApplydisabled = true;
                } 
            },
            checkedAllVal(val){
                // console.log(val,'checkedAllVal');
                this.allParams.isAll = val;
            },
            focusStart(val){
                // this.dateValue = 5;
                // this.dateOptions.map((item,index)=>{
                //     this.isShow[index] = false;
                // })
            },
            focusEnd(val){
                // this.dateValue = 5;
                // this.dateOptions.map((item,index)=>{
                //     this.isShow[index] = false;
                // })
            },
            // 重置搜索
            doReset() {
                console.log(Object.keys(this.form).slice(0,-2),'this.ruleForm');
                Object.keys(this.form).slice(0,-2).map(x => {
                    this.form[x] = '';
                });
                console.log(this.form,'this.ruleForm.pageSize');
                this.$message({
                    message: '已重置',
                    type: 'success',
                });
                // this.doQuery();
                this.doRefresh();
            },
            // 刷新
            doRefresh() {
                //页码从第一页开始
                this.tableconfig.currentpage = 1;
                this.form.pageNo = 1;
                //表格回到顶部
                this.$refs.mytable.$emit('handleGoTop');
                this.doQuery();
            },
            //搜索
            async doQuery() {
                // 获取表格
                this.tableconfig.loading = true;
                this.tableconfig.currentpage = this.form.pageNo;
                this.tableconfig.pagesize = this.form.pageSize;
                let data1 = await brandList(this.form);
                console.log(data1,'data1');
                if(data1.success){
                    this.tableconfig.total = data1.result.total;
                    this.tableconfig.tabledata = data1.result.list;
                }else{
                    this.$message.error(data1.message);
                }
                this.tableconfig.loading = false;
            },
            // 页码数更新
            handleSizeChange(val) {
                this.form.pageNo = 1;
                this.form.pageSizee = val;
                this.doQuery();
                //表格回到顶部
                this.$refs.mytable.$emit('handleGoTop');
            },
            // 当前页码更新
            handleCurrentChange(val) {
                this.form.pageNo = val;
                console.log(this.form.pageNo,'this.tableconfig.currentpage');
                this.doQuery();
                //表格回到顶部
                this.$refs.mytable.$emit('handleGoTop');
            },
            // 查看
            getLook(files){
                if(files.length >0){
                    this.fileList = files;
                    this.fileUrl =  this.fileList[0].fullPath;
                    this.filesName = this.fileUrl.substring(this.fileUrl.lastIndexOf('.')+1);
                    this.fileList.map((item,index)=>{
                        this.$set(this.isFileShow,index,false);
                    })
                    this.isFileShow[0] = true;
                    // console.log(this.filesName,'444444444444');
                    this.dialogLookVisible = true;
                }else{
                    this.$message.warning('暂无文件')
                }
                
            },
            getPic(url,index){
                // console.log(url);
                // this.isFileShow[index] = true;
                this.isFileShow = this.isFileShow.map((item,key)=>{
                    console.log(item,key);
                    if(index == key){
                       return true;
                    }else{
                        return false;
                    }
                })
                console.log(this.isFileShow,'this.isFileShow');
                this.fileUrl =  url;
                this.filesName = this.fileUrl.substring(this.fileUrl.lastIndexOf('.')+1);
                // console.log(this.filesName,'4444444444445555555');
            },
            //表格上传
            getUpload(data){
                this.supportFile.id = data.id;
                this.dialogUploadVisible = true;
            },
            // 新增
            getAdd(){
                this.dialogAddVisible = true;
            },
            // 新增提交
            getaddSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // this.add_form.certificateValidityStart = this.add_form.certificateValidity[0];
                        // this.add_form.certificateValidityEnd = this.add_form.certificateValidity[1];
                        console.log(this.add_form,'this.add_form');
                        addAdvantageBrand(this.add_form).then(res=>{
                            // console.log(res,'33333');
                            if(res.success){
                                this.$message.success(res.message);
                                this.dialogAddVisible = false;
                                this.doQuery();
                                this.$refs['add_form'].resetFields()
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            closeAdd(){
                if(this.$refs.adduploadFile != undefined){
                    this.$refs.adduploadFile.uploadFiles = [];
                }
                this.$refs['add_form'].resetFields()
                // console.log(this.add_form,'wwwwwwwwwwww')
                this.pageData.pageNo = 1;
                this.pageData.pageSize = 20;
                this.pageData.searchName = '';
                this.brandList = [];
                this.getBrandList(this.pageData);
            },
            closeDelay(){
                // console.log(this.$refs.uploadFile,'this.delayform this.delayform');
                if(this.$refs.uploadFile != undefined){
                    this.$refs.uploadFile.uploadFiles = [];
                }
                this.$refs['delayform'].resetFields();
            },
            getUploadSubmit(){
                confirmPicture(this.supportFile.id,this.supportFile.pctureIds).then(res=>{
                    console.log(res,'确认上传');
                    if(res.success){
                        this.$message.success("提交成功");
                        this.supportFile.id = '';
                        this.supportFile.pctureIds= [];
                        this.doQuery();
                        this.dialogUploadVisible = false;
                    }else{
                        this.$message.error(res.message)
                    }
                })
            },
            closeUpload(){
                this.supportFile.id = '';
                this.supportFile.pctureIds = [];
                this.$refs.uploadSupFile.clearFiles();
            },
            // 品牌
            getBrandList(data){
                console.log(data,'eeeeeeeee');
                // console.log(this.brandList,'this.brandListthis.brandList')
                brandByPage(data).then(res=>{
                    console.log(res,'拼购');
                    if(res.code == 200){
                        this.brandList = this.brandList.concat(res.result.list);
                        // console.log(this.brandList,'this.brandListthis.brandList');
                    }
                })
            },
            fiterData(){
                var str = this.$refs.searchSelect.$data.selectedLabel;
                this.pageData.pageNo = 1;
                this.pageData.searchName= str;
                this.brandList = [];
                this.getBrandList(this.pageData)
            },
            // 校验优势品牌
            checkBrand(data){
                checkAdvantageBrand(data).then(res=>{
                    // console.log(res,'校验');
                    if(!res.success){
                        this.isFalse = true
                    }
                })
            },
            // 取消
            getConcel(){
                if(this.selectrow.length >= 1){
                    let arr = [];
                    let arrbox = []
                    this.selectrow.map(val=>{
                        if(val.advantageStatus == 1){
                            arr.push(val.id) 
                        }else{
                            arrbox.push(val.id) 
                        }
                    })
                    // console.log(arrbox,arr,'222222222222222222222');
                    if( arrbox.length > 0 ){
                        this.$message.warning('优势品牌包含无法操作选项');
                        return false;
                    }else{
                        this.brandId = arr;
                        console.log(this.brandId,'this.brandId');
                        this.dialogCancelVisible = true;
                    }
                }else{
                    // this.$message.warning('请选中至少一行的优势品牌进行操作')
                }
            },
            getaCancelSubmit(){
                this.allParams.advantageStatus = this.form.advantageStatus;
                this.allParams.auditStatus = this.form.auditStatus;
                this.allParams.createUser = this.form.createUser;
                this.allParams.brand = this.form.brand;
                this.allParams.ids = this.brandId;
                console.log(this.allParams,'eeeeeeeeeeeeeeeee');
                cancelAdvantageBrand(this.allParams).then(res=>{
                    if(res.success){
                        this.$message.success('该优势品牌已无效');
                        this.dialogCancelVisible = false;
                        this.allParams.advantageStatus = '';
                        this.allParams.auditStatus = '';
                        this.allParams.createUser = '';
                        this.allParams.brand = '';
                        this.allParams.ids = [];
                        this.allParams.isAll = false;
                        this.doQuery();
                    }else{
                        this.$message.error(res.message);
                    }
                })
            },
            // 申请延期
            getDelay(){
                if(this.selectrow.length == 1){
                    console.log(this.selectrow,'this.selectrow');
                    if(this.selectrow[0].advantageStatus == 1 && this.selectrow[0].dominantNature != 2){
                        this.delayform.id= this.selectrow[0].id;
                        this.dominantNature = this.selectrow[0].dominantNature;
                        this.dialogDelayVisible = true;
                    }else{
                        this.$message.warning('优势品牌包含无法操作选项')
                    }
                    
                }else{
                    this.isDelaydisabled = true;
                }
            },
            getdelaySubmit(formName){
                // console.log(this.delayform,'111111111111');
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        application(this.delayform).then(res=>{
                            if(res.success){
                                if(res.code == 200){
                                    this.$message.success(res.message);
                                    this.dialogDelayVisible = false;
                                    this.doQuery();
                                    this.$refs['delayform'].resetFields()
                                }else{
                                    this.$message.error(res.message);
                                    // return false;
                                }
                               

                            }else{
                                this.$message.error(res.message)
                            }

                        })
                    } else {
                        return false;
                    }
                });
            },
            // 再次申请
            getApply(){
                if(this.selectrow.length == 1){
                    if(this.selectrow[0].advantageStatus == 0 && this.selectrow[0].auditStatus == 1 || this.selectrow[0].advantageStatus == 0 &&this.selectrow[0].auditStatus == 2){
                        this.applyform.id= this.selectrow[0].id;
                        this.dominantNature = this.selectrow[0].dominantNature;
                        console.log(this.dominantNature, " this.dominantNature this.dominantNature");
                        this.dialogApplyVisible = true;
                    }else{
                        this.$message.warning('优势品牌包含无法操作选项')
                    }

                }else{
                    this.issedApplydisabled = true;
                    // this.$message.warning('请选中至少一行的优势品牌进行操作')
                }
            },
            getApplySubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // this.applyParams.advantageStatus = this.form.advantageStatus;
                        // this.applyParams.auditStatus = this.form.auditStatus;
                        // this.applyParams.createUser = this.form.createUser;
                        // this.applyParams.brand = this.form.brand;
                        this.applyParams.relationPictureIds = this.applyform.relationPictureIds
                        this.applyParams.id =  this.applyform.id;
                        this.applyParams.startDate = this.applyform.startDate;
                        this.applyParams.endDate = this.applyform.endDate;
                        this.applyParams.remark = this.applyform.remark;
                        reApply(this.applyParams).then(res=>{
                            console.log(this.applyParams,'this.allParams');
                            if(res.success){
                                this.$message.success('优势品牌再次申请');
                                this.dialogApplyVisible = false;
                                // this.applyParams.advantageStatus = '';
                                // this.applyParams.auditStatus = '';
                                // this.applyParams.createUser = '';
                                // this.applyParams.brand = '';
                                this.applyParams.id = [];
                                this.applyParams.relationPictureIds = [];
                                this.applyParams.startDate = '';
                                this.applyParams.endDate = '';
                                this.applyParams.remark ='';
                                this.doQuery();
                                this.$refs['applyform'].resetFields()
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
            closeApply(){
                if(this.$refs.uploadFile != undefined){
                    this.$refs.uploadFile.uploadFiles = [];
                }
                this.$refs.applyform.resetFields();
            },
            //删除
            getDel(){
                if(this.selectrow.length >= 1){
                    let arr = []
                    this.selectrow.map(val=>{
                        arr.push(val.id) 
                    })
                    this.dialogDelVisible = true;
                    this.brandId = arr;
                    console.log(this.brandId);

                }else{
                    this.$message.warning('请选中至少一行的优势品牌进行操作')
                }
            },
            getDelSubmit(){
                this.allParams.advantageStatus = this.form.advantageStatus;
                this.allParams.auditStatus = this.form.auditStatus;
                this.allParams.createUser = this.form.createUser;
                this.allParams.brand = this.form.brand;
                this.allParams.ids = this.brandId;
                deleteAdvantageBrand(this.allParams).then(res=>{
                    if(res.success){
                        this.$message.success('优势品牌已删除');
                        this.dialogDelVisible = false;
                        this.allParams.advantageStatus = '';
                        this.allParams.auditStatus = '';
                        this.allParams.createUser = '';
                        this.allParams.brand = '';
                        this.allParams.ids = [];
                        this.allParams.isAll = false;
                        this.doQuery();
                    }
                })
            },
            // 上传文件种类
            beforeReplyAvatarUpload(file){
                let fileName = file.name;
                let fileType = fileName.substring(fileName.lastIndexOf('.')+1);
                let fileTypJuge = fileType ==='png' || fileType ==='jpg' ||fileType ==='pdf'|| fileType ==='gif'||fileType ==='GIF'||fileType ==='PNG' || fileType ==='JPG' ||fileType ==='PDF';
                if(!fileTypJuge){
                    this.$message.error('上传文件仅支持jpg、png、gif、pdf格式');
                    return false;
                }
            },
            // 文件上传超出限制
            handleReplyExceed(files, fileList){
                // this.$message.warning('不能超过5个文件上传')
            },
            // 上传文件删除
            handleReplyRemove(file, fileList){
                console.log(file, fileList);
                this.add_form.relationPictureIds.forEach((item,index)=>{
                    if(file.response.result == item){
                        this.add_form.relationPictureIds.splice(index,1);
                    }
                })
                
            },
             // 上传文件成功
            handleReplySuccess(response, file, fileList){
                if(response.code == 200){
                    this.$message({
                        message: '上传成功',
                        type: 'success',
                        duration:'2000'

                    });
                    // this.$message.success("上传成功");
                    this.add_form.relationPictureIds.push(response.result);
                }
            },
             // 上传文件尺寸
            beforeDelayAvatarUpload(file){
                console.log(file,'3333333shagchi');
                let fileName = file.name;
                let fileType = fileName.substring(fileName.lastIndexOf('.')+1);
                console.log(fileType,'fileType');
                let fileTypJuge = fileType ==='png' || fileType ==='jpg' ||fileType ==='pdf'|| fileType ==='gif'||fileType ==='GIF'||fileType ==='PNG' || fileType ==='JPG' ||fileType ==='PDF';
                if(!fileTypJuge){
                    this.$message.error('上传文件仅支持jpg、png、gif、pdf格式');
                    return false;
                }
            },
            // 文件上传超出限制
            handleDelayExceed(files, fileList){
                // this.$message.warning('不能超过5个文件上传')
            },
            // 上传文件删除
            handleDelayRemove(file, fileList){
                // console.log(file.response.result, fileList);
                this.delayform.relationPictureIds.forEach((item,index)=>{
                    if(file.response.result == item){
                        this.delayform.relationPictureIds.splice(index,1);
                    }
                })
            },
             // 上传文件成功
            handleDelaySuccess(response, file, fileList){
                if(response.code == 200){
                    this.$message({
                        message: '上传成功',
                        type: 'success',
                        duration:'2000'

                    });
                    // this.$message.success("上传成功");
                    this.delayform.relationPictureIds.push(response.result);
                    this.$refs.delayform.validateField('relationPictureIds')
                    console.log(this.delayform.relationPictureIds,'this.delayform.relationPictureIds')
                }
            },
            beforeApplyAvatarUpload(file){
                console.log(file,'3333333shagchi');
                let fileName = file.name;
                let fileType = fileName.substring(fileName.lastIndexOf('.')+1);
                console.log(fileType,'fileType');
                let fileTypJuge = fileType ==='png' || fileType ==='jpg' ||fileType ==='pdf'|| fileType ==='gif'||fileType ==='GIF'||fileType ==='PNG' || fileType ==='JPG' ||fileType ==='PDF';
                if(!fileTypJuge){
                    this.$message.error('上传文件仅支持jpg、png、gif、pdf格式');
                    return false;
                }
            },
             // 文件上传超出限制
            handleApplyExceed(files, fileList){
                // this.$message.warning('不能超过5个文件上传')
            },
            // 上传文件删除
            handleApplyRemove(file, fileList){
                // console.log(file.response.result, fileList);
                this.applyform.relationPictureIds.forEach((item,index)=>{
                    if(file.response.result == item){
                        this.applyform.relationPictureIds.splice(index,1);
                    }
                })
            },
             // 上传文件成功
            handleApplySuccess(response, file, fileList){
                if(response.code == 200){
                    this.$message({
                        message: '上传成功',
                        type: 'success',
                        duration:'2000'

                    });
                    // this.$message.success("上传成功");
                    this.applyform.relationPictureIds.push(response.result);
                    this.$refs.applyform.validateField('relationPictureIds')
                    console.log(this.applyform.relationPictureIds,'this.applyform.relationPictureIds')
                }
            },
            // 上传证明文件
            beforeUploadAvatarUpload(file){
                let fileName = file.name;
                let fileType = fileName.substring(fileName.lastIndexOf('.')+1);
                console.log(fileType,'fileType');
                let fileTypJuge = fileType ==='png' || fileType ==='jpg' || fileType ==='pdf' || fileType ==='gif'||fileType ==='GIF' || fileType ==='PNG' || fileType ==='JPG' ||fileType ==='PDF';
                if(!fileTypJuge){
                    this.$message.error('上传文件仅支持jpg、png、gif、pdf格式');
                    return false;
                }
            },
              // 上传文件删除
            handleUploadRemove(file, fileList){
                // console.log(file.response.result, fileList);
                this.supportFile.pctureIds.forEach((item,index)=>{
                    if(file.response.result == item){
                        this.supportFile.pctureIds.splice(index,1);
                    }
                })
            },
             // 上传文件成功
             handleUploadSuccess(response, file, fileList){
                if(response.code == 200){
                    this.$message({
                        message: '上传成功',
                        type: 'success',
                        duration:'2000'

                    });
                    // this.$message.success("上传成功");
                    this.supportFile.pctureIds.push(response.result);
                }
            },
        },
        created(){
            this.doQuery();
            this.getBrandList(this.pageData);

        },
        watch:{
            add_form:{
                handler(val,old){
                    if(val.brand != ''){
                        this.checkBrand(val.brand)
                    }
                },
                deep:true,
                immediate:true,
            },
        }
    }
</script>

<style scoped lang="scss">
.brand{
    width: 100%;
    ::v-deep .el-link{
        font-size: 12px !important;
        font-weight: 400 !important;
    }
    .type-box{
        margin: 0;
    }
    // padding:20px 30px;
    .brand-head{
        display: flex;
        width: 100%;
        margin: 15px 0 15px;
        .label-name-col{
            ::v-deep  .el-form-item__label{
                letter-spacing: 18px !important;
                text-align: right !important;
                // color:#1A2035
            }
        }
        .label-tired-col{
            ::v-deep  .el-form-item__label{
                letter-spacing: 2px !important;
                text-align: center !important;
                // color:#1A2035
            }
        }
        ::v-deep  .el-form-item__label{
            background-color: #F0F0F0 !important;
            text-align: center;
            font-weight: 400;
            color:#1A2035;
            border-radius: 2px 0px 0px 2px;
        }
        ::v-deep .el-input--small .el-input__inner{
            width: 95% !important;
            border-radius: 0 2px 2px 0;
        }
        ::v-deep .el-input__suffix{
            right: 20px;
        }
        .search{
            width: 88%;
            // padding-top: 10px;
            .search-form{
                display: flex;
                flex-wrap: wrap;
                .el-form-item{
                    width: 25%;
                   
                }
            }
        }
        .search-btn{
            width: 12%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .btn{
                margin-bottom: 2px;
            }

        }

    }
    .operation-box{
        display: flex;
        // padding: 20px;
    }
    .table-box{
        width: 100%;
        cursor: pointer;
        .look{
            margin-right: 20px;
        }
        ::v-deep .el-link--inner{
            display: flex;
            align-items: center;
            span{
                display: block;
            }
        }
        .success-icon{
            width: 5px !important;
            height: 5px !important;
            background: #00AB2B;
            border-radius: 5px;
            display: block;
            margin-right: 3px;
        }
        .wait-icon{
            background: #FFB300 !important;
        }
        .reduse-icon{
            background: #FF0000 !important;
        }
        .status-box{
            display: flex;
            align-items: center;
            margin: 0;
            span{
                display: block;
            }
        }
        .empty-icon{
            background: #D5D5D5 !important;
        }
        .nalm-icon{
            background: #00AB2B !important;
        }
    }
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td{
        background-color: #E6F7FF !important;
    }
    .addform{
        width: 67.6%;
        margin: auto;
        margin-bottom: 60px !important;
    }
    .dialog-footer{
        text-align: center;
    }
    .apply-dialog{
        .applydate-box{
           ::v-deep .el-form-item--small.el-form-item{
                margin-bottom:8px !important;
            }
           
           
        }
        ::v-deep .el-form-item__label{
            text-align: left;
        }
        ::v-deep .el-textarea .el-input__count{
            bottom: -9px !important;
        }
        ::v-deep .el-icon-date:before{
            margin-right: 10px;
        }
        .addform{
            width: 67.6%;
            margin: auto;
            margin-bottom: 80px !important;
        }
        // ::v-deep .el-dialog:not(.is-fullscreen){
        //     margin-top: 28vh !important;
        // }
        .line{
            text-align: center;
            display:block;
        }
        ::v-deep .el-date-editor.el-input{
            width: 100% !important;
        }
        ::v-deep .el-input__prefix {
            position: absolute;
            left: 88% !important; // left根据实际情况定值
            top: 0;
        }
        ::v-deep .el-input__suffix-inner{
            display: none;
        }
    }
    .del-box{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .del-icon{
        font-size: 50px;
        color: #2348E8;
    }
    .concel-icon{
        width: 60px;
        height: 60px;
        display: block;
    }
    .del-content{
        font-size: 24px;
        font-weight: 600;
        color: #333333;
        line-height: 22px;
    }
   ::v-deep .el-textarea__inner{
        // min-height: 100px !important;
    }
    .look-box{
        width: 100%;
        height: 450px;
        display: flex;
        justify-content: space-between;
        .file-list{
            width: 30%;
            // height: 500px;
            padding-left: 0;
            margin: 0;
            li{
                p{
                    margin:0;
                    margin-bottom: 15px;
                }
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                font-weight: 400;
                color: #1a2035 ;
                line-height: 20px;
                .file-look{
                    color: rgb(51, 51, 51);
                    min-width: 30px;
                }
                .look-color{
                    color: #2348E8;
                }
            }
            
        }
        .file-pic{
            width: 65%;
            // height: 500px;
            display: block;
            overflow-y: auto;
        }
        .file-pdf{
            width: 65%;
            height: 300px;
        }
    }
    .upload-title{
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
        margin-bottom: 20px;
    }
    .tips-mar{
        line-height: 17px;
    }
    .upload-demo{
        margin-top: -8px;
        .el-upload__tip{
            display: inline-block;
            margin-left: 15px;
        }
    }
    .date-box{
        .line{
            text-align: center;
            display:block;
        }
        ::v-deep .el-date-editor.el-input{
            width: 100% !important;
        }
        ::v-deep .el-input__prefix {
            position: absolute;
            left: 88% !important; // left根据实际情况定值
            top: 0;
        }
        ::v-deep .el-input__suffix-inner{
            display: none;
        }
    }
    .el-date-editor{
       ::v-deep .el-input__prefix {
            position: absolute;
            left: 93%; // left根据实际情况定值
            top: 0;
        }
        ::v-deep .el-input__inner{
            padding-left: 16px;
        }
    }
    .cancel-dialog{
       ::v-deep .el-dialog:not(.is-fullscreen){
        margin-top: 28vh !important;
            .el-dialog__header{
                display: none;
            }
        }
    }
    .add-dialog{
        ::v-deep .el-dialog__body{
            padding: 24px 24px 10px;
            color: #1A2035;
            font-size: 14px;
            .el-textarea .el-input__count{
                bottom: -9px !important;
            }
           
            .el-form-item__label{
                text-align: left;
            }
            .date-box{
                .el-form-item--small.el-form-item{
                    margin-bottom: 8px !important;
                }
            }
           
        }
        ::v-deep .el-icon-date:before{
            margin-right: 10px;
        }
    }
    
   
}

</style>